<template>
  <div class="header">
   <div class="header-left">
     <i class="iconfont back-icon">&#xe624;</i>
   </div>
   <div class="header-input">
     <i class="iconfont input-icon">&#xe632;</i>输入城市/景点/游玩主题
   </div>
   <router-link to="/city">
   	  <div class="header-right">
        {{this.city}}<i class="iconfont arrow-icon">&#xe62b;</i>
      </div>
   </router-link>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default{
  name: 'HomeHeader',
  computed: {
  	...mapState(['city'])
  }
}
</script>

<style lang="stylus" scoped>
 @import '../../../assets/styles/varibles.styl'
 .header
   display: flex
   height: 0.44rem
   line-height: 0.44rem
   background-color: $bgColor
   color: #ffffff
   .header-left
     width: 0.4rem
     float: left
     padding-left: .1rem
     .back-icon
       text-align: center
       font-size: 0.18rem
   .header-right
     min-width: 0.66rem
     padding: 0 0.04rem
     float: right
     text-align: center
     color: #fff
     .arrow-icon
       font-size: 0.12rem
       margin-left: 0.02rem
   .header-input
     flex: 1
     background-color: #fff
     height: 0.3rem
     border-radius: 0.04rem
     margin-top: 0.07rem
     color: #d1d4d7
     line-height: 0.3rem
     padding-left: .1rem
     .input-icon
       margin-right: .06rem
</style>
